<template>
	<div class="css-text">
		<h2>for循环类</h2>
		<div class="fo-Gray mt10">一些使用for循环的css类封装  (最大只支持到100)</div>

		<h4 class="mt40">外边距</h4>
		<codeBox :list='list1'></codeBox>
		
		<h4 class="mt40">内边距</h4>
		<codeBox :list='list2'></codeBox>
		
		<h4 class="mt40">层级</h4>
		<codeBox :list='list6'></codeBox>
		
		
		<h4 class="mt40">宽度高度</h4>
		<codeBox :list='list3'></codeBox>
		
		
		<h4 class="mt40">位置</h4>
		<codeBox :list='list4'></codeBox>
		
		
		<h4 class="mt40">其他</h4>
		<codeBox :list='list5'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components:{
			codeBox
		},
		data() {
			return {
				list1: [
					{cssGroup: "margin:0 auto;",class: "mar-0-aut"},
					{cssGroup: "margin-top:10px;",class: "mt10"},
					{cssGroup: "margin-right:10px;",class: "mr10"},
					{cssGroup: "margin-bottom:10px;",class: "mb10"},
					{cssGroup: "margin-left:10px;",class: "ml10"},
					
					{cssGroup: "margin-left:10px;margin-right:10px;",class: "mar-lr10"},
					{cssGroup: "margin-top:10px;margin-bottom:10px;",class: "mar-tb10"},
					{cssGroup: "margin:10px;",class: "mar-10"},
				],
				list2:[
					{cssGroup: "padding-top:10px;",class: "pt10"},
					{cssGroup: "padding-right:10px;",class: "pr10"},
					{cssGroup: "padding-bottom:10px;",class: "pb10"},
					{cssGroup: "padding-left:10px;",class: "pl10"},
					
					{cssGroup: "padding-left:10px;padding-right:10px;",class: "pad-lr10"},
					{cssGroup: "padding-top:10px;padding-bottom:10px;",class: "pad-tb10"},
					{cssGroup: "padding:10px;",class: "pad-10"},
				],
				
				list3:[
					{cssGroup: "width:10px;",class: "wid-10"},
					{cssGroup: "max-width:10px;",class: "max-wid-10"},
					{cssGroup: "min-width:10px;",class: "min-wid-10"},
					{cssGroup: "width:10%;",class: "wid-per-10"},
					{cssGroup: "width:100%;",class: "wid1p"},
					{cssGroup: "max-width:10%;",class: "max-wid-per-10"},
					{cssGroup: "min-width:10%;",class: "min-wid-per-10"},
					
					{cssGroup: "line-height:10px;",class: "lin-hei-10"},
					{cssGroup: "height:10px;",class: "hei-10"},
					{cssGroup: "max-height:10px;",class: "max-hei-10"},
					{cssGroup: "min-height:10px;",class: "min-hei-10"},
					{cssGroup: "height:10%;",class: "hei-per-10"},
					{cssGroup: "height:100%;",class: "hei1p"},
					{cssGroup: "max-height:10%;",class: "max-hei-per-10"},
					{cssGroup: "min-height:10%;",class: "min-hei-per-10"},
				],
				
				
				list4:[
					{cssGroup: "bottom:10px",class: "bot-10"},
					{cssGroup: "top:10px",class: "top-10"},
					{cssGroup: "left:10px",class: "lef-10"},
					{cssGroup: "right:10px",class: "rig-10"},
				],
				
				
				list5:[
					{cssGroup: "height:50px; width:50px",class: "icon-50"},
					{cssGroup: "border-radius:20px",class: "radi-20"},
					{cssGroup: "border-radius:50%",class: "radi-per-50"},
					{cssGroup: "fonst-size:14px",class: "fo-14"},
				],
				
				
				list6:[
					{cssGroup: "z-index:10;",class: "z-ind-10"},
					{cssGroup: "循环值最大支持到100;",class: "以下是另外定义的"},
					{cssGroup: "z-index: 200;",class: "z-ind-200"},
					{cssGroup: "z-index: 500;",class: "z-ind-500"},
					{cssGroup: "z-index: 100;",class: "z-ind-100"},
					{cssGroup: "z-index: 5000;",class: "z-ind-5000"},
					{cssGroup: "z-index: 10000;",class: "z-ind-10000"},
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>
